@extends('layouts.mobile_main')

@section('title', '充值')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <!-- <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}css/check.css?v={{env('CCS_VERSION')}}"> -->
    <style>
        .user_remainder{width: 100%;height: 1.8rem;text-align: center;background-color: #fff;margin-top: 0.2rem;padding-top: 0.3rem;overflow: hidden;}
        .user_remainder p{width: 100%;float: left;}
        .recharge_explain{color: #72ACE3;}
        .recharge_explain_content{position: fixed;bottom: 1rem;left: 50%;width: 6rem;text-align: center;background: rgba(0,0,0,0.6);padding: 0.2rem;margin-left: -3rem;font-size: 0.4rem;color: #fff;border-radius: 0.1rem;display: none;}
    </style>
@endsection

@section('content')
	<header class="PxCook oh">
    	<a class="fl" href="javascript:history.go(-1);">
    	    <img class="fl" src="{{env('IMAGE_DOMAIN')}}/images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
    	</a>
    	<span class="fl co_violet fz_48">充值</span>
    </header>
    <section class="PxCook_content oh">
        <div class="user_remainder">
            <p class="co_violet" style="margin-bottom: 0.1rem;font-size: 0.6rem;">{{$balance}}</p>
            <p class="fz_40">用户余额</p>
        </div>
        <ul class="PxCook_money oh fz_48 pr">
            <li class="fl">
                <p class="co_violet">充100</p>
                <p class="fz_44 co_orange">翻倍为200</p>
            </li>
            <li class="fl">
                <p>充200</p>
                <p class="fz_44 co_orange">翻倍为400</p>
            </li>
            <li class="fl">
                <p>充500</p>
                <p class="fz_44 co_orange">翻倍为1000</p>
            </li>
            <li class="fl">
                <p>充1000</p>
                <p class="fz_44 co_orange">翻倍为2000</p>
            </li>
        </ul>
        <input id="recharge_money" class="tc fz_44 fl" type="number" name="amount" placeholder="手动输入充值金额（10元起充，翻倍到账）" onpropertychange="change_money()" oninput="change_money()" />
        <p class="fz_48 tc PxCook_explain1 fl co_gray" style="line-height: 0.8rem;">充值金额<span class="co_orange">100</span> 立即翻倍到账<span class="co_orange">200</span></p>
        <div class="fz_48  fl pr oh" style="width: 90%;padding: 0 4%;margin: 1%;background: #fff;height: 1.5rem;line-height: 1.5rem;">
            <p class="fl">服务费{{env('RECHARGE_FEE')*100}}%</p>{{--<s class="co_gray fz_40" style="margin-left: 0.2rem;">(10%)</s>--}}
            <p class="fr service_charge">{{env('RECHARGE_FEE')*100}}元</p>
            <!-- <div class="slideThree" style="position: absolute;top: -0.1rem;right: 1rem;">
                <input type="checkbox" value="None"  id="slideThree" name="check" checked />
                <label for="slideThree"></label>
            </div> -->
        </div>
        <p class="fz_48 tc fl co_gray" style="width: 100%;margin: 10px 0;">点击立即充值，即表示已同意<span class="recharge_explain">充值说明</span></p>
        <button class="fz_48 me_out fl" style="margin-top: 0.2rem;" id="recharge_pay">立即充值</button>
        <!-- <ol class="fz_40 co_violet fl PxCook_explaincz pr">
            <li class="PxCook_explaincz_text tc">充值说明</li>
            <li>1.充值金额≥500，立即翻倍到账。</li>
            <li>2.充值金额＜500：需要等待12小时后翻倍到账，成功分享至朋友圈只需6小时即可翻倍到账。若使用翻贝券，充值后无需等待立即翻倍到账。</li>
            <li>3.翻贝券：充值立即翻倍到账。新用户首次充值或邀请好友注册成功，即可获得翻贝券。</li>
        </ol> -->
        <p class="recharge_explain_content">充值到账后的余额只可用于翻贝网内交易，不可退还！</p>
    </section>
@endsection

@section('scriptResources')
    @parent
    <script>
        window.onresize=function(){
            pagesp();
        }
        $("input[name='amount']").val("");
        var choiceimg=$('<img src="{{env('IMAGE_DOMAIN')}}/images/choice.png?v={{env('IMAGE_VERSION')}}" alt="">');
        var choicepos=0;
        var selectmoney = '100';
        var serviceRate = {{env('RECHARGE_FEE')}};//服务费收取比例
        $(".PxCook_money li").eq(choicepos).append(choiceimg);
        //自选框金额改变
        $(".PxCook_money li").on("click",function(){
            $("input[name='amount']").val('');
            var i=$(this).index();
            $(".PxCook_money li").eq(i).append(choiceimg);
            selectmoney = $(".PxCook_money li").eq(i).children("p").eq(0).text();
            for (var j = 0; j < $(".PxCook_money li").length; j++) {
                $(".PxCook_money li").eq(j).children("p").eq(0).css("color","#000");
            };
            $(".PxCook_money li").eq(i).children("p").eq(0).css("color","#9955c6");
            selectmoney = selectmoney.replace('充', '');
            $(".PxCook_explain1 span").eq(0).html(selectmoney);
            $(".PxCook_explain1 span").eq(1).html(selectmoney*2);
            $(".service_charge").html(selectmoney*serviceRate+"元");
        });
        $("#recharge_money").focus(function(){
            $(".PxCook_money li").children("img").remove();
            selectmoney = '';
            $(".PxCook_explain1").hide();
        });
        //输入金额服务费自动改变
        function change_money(){
            selectmoney = $("#recharge_money").val();
            if(selectmoney == ''){
                $(".PxCook_explain1").hide();
            }else{
                $(".PxCook_explain1").show();
                $(".PxCook_explain1 span").eq(0).html(selectmoney);
                $(".PxCook_explain1 span").eq(1).html(selectmoney*2);
                $(".service_charge").html(selectmoney*100*serviceRate/100+"元");
            }
        }
        if(/msie/i.test(navigator.userAgent))    //ie浏览器   
            {document.getElementById('recharge_money').onpropertychange=change_money   
        } else{//非ie浏览器，比如Firefox   
            document.getElementById('recharge_money').addEventListener("input",change_money,false);   
        }  
        var PxCook_content_h=$(window).height()-$(".PxCook").height()-1;
        $(".PxCook_content").css({"min-height":PxCook_content_h});
        // $(".slideThree input").click(function(){
        //     var local=$(".slideThree label").position().left;
        //     // alert(local)
        //     if(local!=0){//关
        //         $(".slideThree").css("background","#CDCDCD");
        //     }else{//开
        //         $(".slideThree").css("background","#9a54c6");
        //     }
        // })
        $('#recharge_pay').click(function() {
            if(selectmoney == ''){
                selectmoney = $("input[name='amount']").val();
            }
            if(selectmoney%1 != 0){
                alert("请输入整数金额！");
                return;
            }else if(selectmoney < 10){
                alert("充值金额不能少于10元");
                return;
            }else if((selectmoney == 0) || (selectmoney == '')){
                alert("请输入金额或选择金额");
                return;
            }
            window.location.href = '/mobile/wallet/recharge/pay?amount=' + selectmoney;
        });
        var recharge_explain_onoff = "on";
        var recharge_explain_timer;
        $(".recharge_explain").click(function () {
            if(recharge_explain_onoff == "on"){
                recharge_explain_onoff = "off";
                $(".recharge_explain_content").show();
                recharge_explain_timer = setInterval(function () {
                    $(".recharge_explain_content").hide();
                    clearInterval(recharge_explain_timer);
                    recharge_explain_onoff = "on"
                },3000)
            }else {
                return false;
            }
        })
    </script>
@endsection